<script setup lang="ts">
import { ref } from 'vue'
import {useLoginStore} from '../store/useLoginStore'
import router from '../router/index'


const activeIndex = ref('1')
const loginStore = useLoginStore()
console.log(loginStore)
const handleSelect = (index: string) => {
  router.push(index)
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="text-align: right;">
        <div>
          <font>欢迎用户{{loginStore.username}}</font>
        </div>
      </el-header>
      <el-container>
        <el-aside width="150px">
          <el-menu :default-active="activeIndex" @select="handleSelect">
            <el-menu-item index="/GoodsCategory">分类管理</el-menu-item>
            <el-menu-item index="/GoodsManager">商品管理</el-menu-item>
            <el-menu-item index="/OrderManager">订单管理</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <div>
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-header {
  background-color: rgb(98, 114, 120);
}

.el-aside {
  background-color: rgb(98, 114, 120);
  height: 100vh;
}

.el-menu-item.is-active {
  background-color: rgb(98, 114, 120);/* 激活时的背景颜色 */
  color: white; /* 激活时的文字颜色 */
}

</style>